<template>
  <div class="Login">
    <div class="center">
      <div class="left">
        <img :src="img" alt="" />
      </div>
      <div class="right">
        <div class="input-area">
          <el-input
            placeholder="用户名"
            prefix-icon="el-icon-user-solid"
            v-model="name"
          ></el-input>
          <el-input
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
            v-model="password"
            show-password
          ></el-input>
          <div class="remem-ber">
            <div class="remom-ber-check">
              <el-checkbox v-model="checked">记住密码</el-checkbox>
            </div>
            <a href="#/login" class="forget-password">忘记密码</a>
          </div>
        </div>
        <div v-show="alertErro">
          <el-alert title="密码有误" type="error" center show-icon>
          </el-alert>
        </div>
        <el-button type="primary" @click="loginChange()">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      password: "",
      checked: false,
      img: require("../image/login.png"),
      user: [{ name: "admin", password: "123456" }],
      alertErro: false,
    };
  },
  methods: {
    // 判断密码输入正确
    loginChange() {
      if (
        this.name === this.user[0].name &&
        this.password === this.user[0].password
      ) {
        // 密码正确，跳转用户页面
        console.log(this.name + "密码：" + this.password);
        this.alertErro = false;
        this.userPage();
      } else {
        console.log("密码输入错误");
        this.name = "";
        this.password = "";
        this.alertErro = true;
      }
    },
    // 跳转到用户页面
    userPage() {
      // 还没做缓冲用户账号和密码
      this.$router.push('/user');
    }
  },
};
</script>

<style lang="scss" scoped>
.Login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background: #f0f2f5;
}
.center {
  display: flex;
  width: 1000px;
  height: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}
.left {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 600px;
  border-radius: 8px 0 0 8px;
  background-color: #cfdcfc;
}
.left > img {
  height: 600px;
}

.right {
  margin: 0 auto;
  padding-top: 80px;
}

.input-area {
  width: 230px;
  margin-bottom: 10px;
}
.input-area > .el-input + .el-input {
  margin-top: 22px;
}
.input-area > .el-input + .remem-ber {
  display: flex;
  justify-content: space-between;
  margin-top: 22px;
}
.input-area > .remem-ber > a {
  color: #409eff;
  font-size: 14px;
  text-decoration: none;
}
.right > .el-button {
  margin-top: 22px;
  width: 100%;
}
</style>
